<template>
    <div>
        <div class="title-header">
            <div class="line"></div>
            <h3>原料加工作业流</h3>
        </div>
        <el-row class="out-house-slow">
            <div class="out-house center">
                <div class="out-start"></div>
                <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
                <div class="out-first">
                    <p class="out-edit-box">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#iconyubao"></use>
                        </svg>
                    </p>
                    <p class="out-title">加工换票</p>
                    <p class="point" @click="changeView('processOder')">加工单:<span class="tdcl">{{stData.waitMachiningCount}}</span></p>
                    <p class="link" @click="changeView('stockRaw')">未换票提单:<span class="tdcl">{{stData.noAcceptOutStockCount}}</span></p>
                </div>
                <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
                <div class="out-first">
                    <p class="out-edit-box">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#iconwuzichuku"></use>
                        </svg>
                    </p>
                    <p class="out-title">成品入库验收</p>
                    <p class="point" @click="changeView('acceptance')">作业中:<span class="tdkp">{{stData.taskMachiningCount}}</span></p>
                </div>
                <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
                <div class="out-first">
                    <p class="out-edit-box">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#iconcundanshangzhang"></use>
                        </svg>
                    </p>
                    <p class="out-title">成品入库复核</p>
                    <p class="point" @click="changeView('recheck')">待复核:<span class="tdcl">{{stData.checkMachiningCount}}</span></p>
                </div>
                <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
                <div class="out-first">
                    <p class="out-edit-box">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#iconfuhe"></use>
                        </svg>
                    </p>
                    <p class="out-title">加工费结算</p>
                    <p class="point">现结挂账:<span class="tdkp">{{stData.waitFeeCount}}</span></p>
                    <p class="point">待结算:<span class="tdcl">{{stData.handleFeeCount}}</span></p>
                </div>
                <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
                <div class="out-start"></div>
            </div>
        </el-row>
        <component :is="currentView">
        </component>
    </div>
</template>
<script>
    import {
        getRawSt
    } from '@/api/raw/raw'
    import processOder from './raw/processOder'
    import stockRaw from './raw/stockRaw'
    import acceptance from './raw/acceptance'
    import recheck from './raw/recheck'
    export default {
        components: {
            processOder,
            stockRaw,
            acceptance,
            recheck
        },
        data() {
            return {
                stData: {},
                currentView: 'processOder',
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                getRawSt().then(res => {
                    this.stData = res.data
                })
            },
            changeView(view) {
                this.currentView = view
            }
        }
    }

</script>
<style lang="scss" scoped>
    @font-face {
        font-family: 'iconfont';
        /* project id 1072096 */
        src: url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.eot');
        src: url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.woff2') format('woff2'),
            url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.woff') format('woff'),
            url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.svg#iconfont') format('svg');
    }

    .iconfont {
        font-family: 'iconfont' !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

    .title-header {
        width: 90%;
        display: flex;
        height: 30px;
        margin-bottom: 20px;
    }

    h3 {
        margin-left: 10px;
    }

    .line {
        border-left: solid 5px #00a1ff;
        height: 18px;
        margin-top: 5px;
    }

    .out-house-slow {
        border: 1px solid #e3e3e3;
        padding: 20px;
        margin-bottom: 10px;
    }

    .out-house {
        display: flex;
        align-items: center;
    }

    .center {
        margin: 0 auto;
        width: 1200px;
    }

    .legend {
        display: inline-block;
        width: 32px;
        height: 22px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 10px;
    }

    .legend1 {
        background-color: red;
    }

    .legend2 {
        background-color: green;
    }

    .out-start {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #3266cc;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        /* Internet Explorer */
        -moz-transform: rotate(45deg);
        /* Firefox */
        -webkit-transform: rotate(45deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(45deg);
        /* Opera */
    }

    .out-start1 {
        width: 100px;
    }

    .out-jiantou {
        display: inline-block;
        width: 50px;
        height: 10px;
        background-color: #3266cc;
    }

    .out-first {
        width: 114px;
        height: 120px;
        border: 2px solid #3a79d8;
        padding: 10px;
        border-radius: 6px;
        position: relative;
    }

    .out-second {
        width: 114px;
        padding: 10px;
        border-radius: 6px;
        position: relative;
        border: 2px solid #3a79d8;
        text-align: center;
    }

    .out-three {
        width: 180px;
        padding: 10px;
        margin-right: 10px;
        border-radius: 6px;
        box-shadow: 0px 0px 9px #ddd;
        text-align: center;
    }

    .out-second img,
    .out-three img {
        vertical-align: middle;
    }

    .green-style {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .yellow {
        padding-left: 30px;
        background: #ffd900;
        color: #fff;
        border-radius: 50% / 50%;
    }

    .red {
        padding-left: 30px;
        background: #f50627;
        color: #fff;
        border-radius: 50% / 50%;
    }

    .green {
        padding-left: 30px;
        background: #5daf34;
        color: #fff;
        border-radius: 50% / 50%;
    }

    .out-green {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
        background: #5daf34;
        border-radius: 50% / 50%;
        color: #fff;
    }

    .out-red {
        position: absolute;
        top: -8px;
        right: 30px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
        background: #f50627;
        border-radius: 50% / 50%;
        color: #fff;
    }

    .out-yellow {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
        background: #ffd900;
        color: #fff;
        border-radius: 50% / 50%;
    }

    .out-edit {
        text-align: center;
        font-size: 30px;
        color: #3a79d8;
    }

    .out-edit-box {
        text-align: center;
    }

    .out-edit-box img {
        height: 37px;
    }

    .out-jt {
        margin: 0 20px;
    }

    .out-jt i {
        font-size: 30px;
    }

    .out-title {
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .point {
        cursor: pointer;
    }

</style>
